<template>
  <div id="Member-management">
      <div class="address">
        <h3>会员管理</h3>
      </div>
      <div class="add">
        <el-button @click="addOneRow" v-if="isEditNewRow === -1">新增一行</el-button>
      </div>
      <div class="show-sales"> 
        <el-scrollbar style="height: 100%;"> <!-- 滚动条 -->
          <el-table
            class="room-type-table TABLEMINWIDH"
            ref="multipleTable"
            :data="members"
            :key="updateTableKey"
            :row-class-name="tableRowClassName"
            tooltip-effect="dark"
            style="width: 100%;font-size: 1.5rem;">
            <!-- 选择框 -->
            <el-table-column
              type="selection"
              min-width="10%">
            </el-table-column>
            <!-- 会员号 -->
            <el-table-column
              label="卡号"
              header-align="center"
              align="center"
              min-width="10%">
              <template slot-scope="scope">
                <el-input v-model="newVip" ref="focusElement" v-if="scope.$index === isEditNewRow"></el-input>
                <span v-else>{{scope.row.vip}}</span>
              </template>
            </el-table-column>
            <!-- 会员名 -->
            <el-table-column
              label="会员"
              header-align="center"
              align="center"
              min-width="10%">
              <template slot-scope="scope">
                <el-input v-model="newName" v-if="scope.$index === isEditNewRow"></el-input>
                <span v-else >{{scope.row.name}}</span>
              </template>
            </el-table-column>
            <!-- 等级 -->
            <el-table-column
              header-align="center"
              align="center"
              min-width="15%">
               <template slot="header">
                <el-dropdown class="dropdown"  trigger="click" style="font-size:1.5rem;color:#909399">
                  <span class="el-dropdown-link">
                    等级<i class="el-icon-arrow-down el-icon--right"></i>
                  </span>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item @click.native="selectVip(vip)" v-for="vip in memberPreName" :key="vip">
                      {{vip + '会员'}}</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
             </template>
             <template slot-scope="scope">
                <span v-if="scope.$index === isEditNewRow">0</span>
                <span :style="{color:memberColor[scope.row.lv]}"
                v-else><i class="hotel-management-icon icon-huangguanguanjundiyihuiyuan"></i> {{memberPreName[scope.row.lv] + '会员'}}</span>
              </template>
            </el-table-column>
            <!-- 积分 -->
            <el-table-column
              label="积分"
              header-align="center"
              align="center"
              min-width="10%">
               <template slot-scope="scope">
                <span v-if="scope.$index === isEditNewRow">0</span>
                <span v-else>{{scope.row.points}}</span>
              </template>
            </el-table-column>
            <!-- 身份证 -->
            <el-table-column
              label="身份证"
              header-align="center"
              align="center"
              min-width="15%">
              <template slot-scope="scope">
                <el-input v-model="newID" v-if="scope.$index === isEditNewRow"></el-input>
                <span v-else>{{scope.row.id}}</span>
              </template>
            </el-table-column>
          </el-table>
        </el-scrollbar><!-- /滚动条 -->
      </div>
      <div id="bottom" class="add">
        <!-- <el-button @click="addOneRow" v-if="isEditNewRow === -1">新增一行</el-button> -->
        <div v-if="isEditNewRow !== -1">
          <el-button @click="cancleOneRow">取消 <i class="el-icon-close"></i></el-button>
          <el-button @click="saveOneRow">保存<i class="el-icon-upload el-icon--right"></i></el-button>
        </div>
      </div>
  </div>
</template>

<script>
import { getAllVip, addOneVip } from '@/api/api'
import { loadingMixin } from '@/utils/mixins/loading'
import { showMessage } from '@/utils/utils'
export default {
  mixins: [ loadingMixin ],
  name: 'Member-management',
  data() {
    return {
      members: [],
      memberColor:['gray', 'green', 'lightgray', 'gold', 'darkslateblue', 'deepskyblue', 'purple'],
      memberPreName:['普通', '青铜', '白银', '黄金', '铂金', '钻石', '至尊', '全部', '排序'],

      // 新增行index
      isEditNewRow: -1,
      newVip:'',
      newID:'',
      newName:'',

      updateTableKey: Math.random(),

      Show:[]
    }
  },
  methods:{
    sortVip() {
      for(let i = 0; i < this.members.length; i++) {
        for(let j = i + 1; j < this.members.length; j++) {
          if(this.members[i].lv < this.members[j].lv) {
            let obj = this.members[i]
            this.members[i] = this.members[j]
            this.members[j] = obj
            let t = this.Show[i]
            this.Show[i] = this.Show[j]
            this.Show[j] = t
          }
        }
      }
    },
    selectVip(status) {
      if(status === '全部') {
        for(let i in this.Show) {
          this.Show[i] = true
        }
      } else if(status === '排序') {
        for(let i in this.Show) {
          this.Show[i] = true
        }
        this.sortVip()
      } else {
        let lv = this.memberPreName.indexOf(status)
        for(let i in this.members) {
          if(this.members[i].lv === lv) this.Show[i] = true
          else this.Show[i] = false
        }
      }
      this.updateTableKey = Math.random()
    },
    tableRowClassName(item) {
      if(this.Show[item.rowIndex] === false) return 'hide-one-row'
      return ''
    },
     // 保存新增
    saveOneRow(){
      let obj = {
        "name": this.newName,
        "points": 0, 
        "vip": this.newVip, 
        "lv": 0, 
        "id": this.newID
      }
      addOneVip(obj).then(response => {
        if(response.data === '添加成功') {
          showMessage(this, '保存成功', 'success')
          this.members[this.members.length - 1] = obj
          this.isEditNewRow = -1
          this.newGoodName = ''
          this.newGoodPrice = ''
          this.newGoodNumber = ''
          this.updateTableKey = Math.random()
        }
      }).catch(error => showMessage(this, '增加会员失败！', 'error'))
    },
    // 取消新增
    cancleOneRow() {
      this.members.splice(this.members.length - 1, 1)
      this.isEditNewRow = -1
      this.newGoodName = ''
      this.newGoodPrice = ''
      this.newGoodNumber = ''
    },
    // 新增一行
    addOneRow() {
      this.isEditNewRow = this.members.length
      this.members.push({"name":"","points":0,"vip":"","lv":0,"id":""})
      this.$nextTick(() => {
        document.getElementById('bottom').scrollIntoView();
        this.$refs.focusElement.focus()
      })
    },
    async load() {
      await Promise.resolve(getAllVip().then(response => {
          this.members = response.data
          for(let obj of this.members) this.Show.push(true)
        }).catch(error =>  showMessage(this, '获取所有vip信息失败！', 'error'))
      )
    }
  },
 
}
</script>

<style>
#Member-management .el-table__row{
  height: 5rem;
}
#Member-management .el-table .hide-one-row{
  display: none;
}
#Member-management .cell{
  height: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}
</style>
<style lang="less" scoped>
.address{
  position: relative;
  color: #aa97b0;
  top: -20px;
}
.add{
  width: 100%;
  background-color: #ffffff;
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>